<template>
  <div class="detail">
    <div class="hou" @click="back">&lt;</div>
    <!-- 商品轮播图 -->
    <van-swipe class="top_swipe" @change="onChange">
      <van-swipe-item v-for="(s, index) in storeInfo.slider_image" :key="index">
        <img :src="s" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ current + 1 }}/{{ storeInfolength }}
        </div>
      </template>
    </van-swipe>
    <!-- 商品详情 -->
    <div class="info">
      <div class="info_top">
        <p>￥{{ storeInfo.price }}</p>
        <p>￥{{ storeInfo.vip_price }}</p>
        <img src="@/assets/image/vip.png" />
      </div>
      <div class="info_con">
        <p>{{ storeInfo.store_name }}</p>
      </div>
      <div class="info_bto">
        <p>原价:￥{{ storeInfo.ot_price }}</p>
        <p>库存:{{ storeInfo.stock }}{{ storeInfo.unit_name }}</p>
        <p>销量:{{ storeInfo.sales }}{{ storeInfo.unit_name }}</p>
      </div>
    </div>
    <!-- 商品种类 -->
    <van-cell
      v-if="sshow"
      :title="`已选择` + suki"
      is-link
      @click="show = true"
    />
    <!-- 用户评价 -->
    <van-cell class="cell_right" title="用户评价(0)" is-link value="好评率" />
    <!-- 优品推荐 -->
    <div class="cell_div">
      <van-cell value-class="cell" value="优品推荐" />
      <img src="@/assets/image/dian.png" />
      <img src="@/assets/image/dian.png" />
    </div>
    <van-swipe class="my-swipe" indicator-color="red">
      <van-swipe-item>
        <ul @click="rel">
          <good-list v-for="g in good_list1" :key="g.id" :g="g"></good-list>
        </ul>
      </van-swipe-item>
      <van-swipe-item>
        <ul @click="rel">
          <good-list v-for="g in good_list2" :key="g.id" :g="g"></good-list>
        </ul>
      </van-swipe-item>
      <van-swipe-item>
        <ul @click="rel">
          <good-list v-for="g in good_list3" :key="g.id" :g="g"></good-list>
        </ul>
      </van-swipe-item>
    </van-swipe>
    <!-- 详情 -->
    <van-cell value="产品介绍" />
    <!-- v-html 会将元素当成HTML标签解析后输出 -->
    <div v-html="storeInfo.description" class="description"></div>
    <!-- 底部导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        icon="cart-o"
        to="/cart"
        :badge="valid.length"
        text="购物车"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        @click="show = true"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button
        @click="show = true"
        type="danger"
        text="立即购买"
      />
    </van-goods-action>
    <!-- 商品规格 -->
    <!-- 
      :sku="sku" //商品规格
      :goods="goods"  //	商品信息
      :goods-id="goodsId"  //商品 id
      @add-cart="addCart"  //点击添加购物车回调
      @buy-clicked="buyClicked"  //点击购买回调
     -->
    <van-sku
      ref="checkbox"
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      @add-cart="addCart"
      @buy-clicked="buyClicked"
    />
  </div>
</template>
<script>
import GoodList from "@/components/GoodList"; //优品推荐 轮播图
import { Toast } from "vant";
// Toast.setDefaultOptions({ duration: 500 });
export default {
  components: {
    GoodList, //优品推荐轮播图
  },
  props: ["sid"],
  // 商品列表数据
  created() {
    // console.log(this.$router);
    this.$axios.get("/product/detail/" + this.$route.query.id).then((d) => {
      // console.log("商品列表数据==>", d);
      let id = 1;
      let idobj = {};
      let ssk = 1;
      let datas = d; //总详情数据
      let productAttr = datas.productAttr; //产品可用SKU属性
      this.productValue = datas.productValue; //产品可用SKU属性组合
      this.storeInfo = datas.storeInfo; //产品信息  价格 描述 图片等
      this.sku.price = datas.storeInfo.price;
      this.sku.stock_num = datas.storeInfo.stock;
      this.storeInfolength = datas.storeInfo.slider_image.length;
      this.good_list1 = datas.good_list.slice(0, 6); //good_list:[],//推荐产品
      this.good_list2 = datas.good_list.slice(6, 12);
      this.good_list3 = datas.good_list.slice(12, 18);
      this.sku.list = [];
      if (this.productValue.length == 0) {
        this.sshow = false;
      }
      if (this.productValue.length != 0) {
        this.goods.picture =
          this.productValue[Object.keys(this.productValue)[0]].image;
        this.sku.tree = productAttr.map((atr, ads) => {
          let va = atr.attr_value.map((at, index) => {
            id++;
            idobj[at.attr] = id;
            let attrs = {
              id: id,
              name: at.attr,
            };
            if (ads < 1) {
              attrs.imgUrl =
                this.productValue[Object.keys(this.productValue)[index]].image;
            }
            return attrs;
          });
          var ks = "s" + ssk;
          ssk++;
          return {
            k: atr.attr_name,
            k_id: atr.attr_name,
            v: va,
            k_s: ks,
          };
        });
        for (let key in this.productValue) {
          let v = this.productValue[key];
          let keys = key.split(",");
          this.sku.list.push({
            id: v.unique,
            price: v.price * 100,
            s1: idobj[keys[0]],
            s2: idobj[keys[1]],
            stock_num: v.stock,
            goods_id: v.product_id,
            imgUrl: v.image,
          });
        }
      } else {
        this.goods.picture = this.storeInfo.image;
        this.sku.tree = [];
        this.sku.list = [
          {
            id: "",
            price: this.storeInfo.price * 100,
            s1: "1216",
            s2: "1193",
            stock_num: this.storeInfo.stock,
            goods_id: this.storeInfo.id,
            imgUrl: this.storeInfo.image,
          },
        ];
      }
    });
  },
  data() {
    return {
      suki: "", //
      current: 0,
      storeInfo: {}, //产品信息  价格 描述 图片等
      storeInfolength: 0,
      productValue: null,
      good_list1: [], //推荐产品
      good_list2: [],
      good_list3: [],
      show: false, //
      sshow: true,
      valid: [], //购物车里的物品数据
      sku: {
        //初始化demo数据
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", //属性名称
            k_id: "1", //属性的ID值 唯一 在当前产品里面唯一
            v: [
              //颜色属性可用值列表
              {
                id: "30349", //属性ID
                name: "红色", //属性名
                //属性图片，默认只有第一行属性有
                imgUrl: "https://b.yzcdn.cn/vant/sku/shoes-1.png",
              },
              {
                id: "1215",
                name: "白色",
                imgUrl: "https://b.yzcdn.cn/vant/sku/shoes-1.png",
              },
              {
                id: "1216",
                name: "棕色",
                imgUrl: "https://b.yzcdn.cn/vant/sku/shoes-1.png",
              },
            ],
            k_s: "s1", //属性的k_s值 对应list里面组合键名
          },
          {
            k: "尺寸",
            k_id: "2",
            v: [
              {
                id: "1193",
                name: "30码",
              },
              {
                id: "1194",
                name: "40码",
              },
            ],
            k_s: "s2",
            count: 2,
          },
        ],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [
          {
            id: 2300,
            price: 500,
            s1: "1216",
            s2: "1193",
            stock_num: 100,
            goods_id: 123123,
          },
          {
            id: 2259,
            price: 120, //价格
            s1: "1215", //对应属性列表里面 k_s 等于s1的属性id值
            s2: "1193",
            stock_num: 20, //库存
            goods_id: 946755, //产品ID
          },
          {
            id: 2260,
            price: 110,
            s1: "1215",
            s2: "1194",
            stock_num: 2,
            goods_id: 946755,
          },
          {
            id: 2257,
            price: 130,
            s1: "30349",
            s2: "1193",
            stock_num: 40,
            goods_id: 946755,
          },
          {
            id: 2258,
            price: 100,
            s1: "30349",
            s2: "1194",
            stock_num: 50,
            goods_id: 946755,
          },
        ],
        price: "500",
        stock_num: null, // 商品总库存
        none_sku: false, // 是否无规格商品
        hide_stock: true, // 是否隐藏剩余库存
      },
      goods: {}, //goods 对象结构
      goodsId: 1,
    };
  },

  methods: {
    back() {
      this.$router.back();
    },
    onChange(index) {
      this.current = index;
    },
    //点击购买 回调
    buyClicked(e) {
      this.axios
        .post("/cart/add", {
          cartNum: e.selectedNum, //数量
          new: 0, //是否最新
          productId: e.selectedSkuComb.goods_id, //产品ID
          uniqueId: e.selectedSkuComb.id, //SKU组合唯一ID  在添加购物车的时候在 回调函数参数的selectedSkuComb属性里面的
        })
        .then((d) => {
          // console.log("ddd添加" , d);
          this.$router.push("/submit/" + d.data.cartId);
        });
    },

    // 添加购物车
    addCart(e) {
      //点击添加购物车回调
      // console.log("添加购物车 e=>",e);//
      this.show = false;
      this.axios.post("cart/add", {
        cartNum: e.selectedNum, //数量
        new: 0, //是否最新
        productId: e.selectedSkuComb.goods_id, //产品ID
        uniqueId: e.selectedSkuComb.id, //SKU组合唯一ID  在添加购物车的时候在 回调函数参数的selectedSkuComb属性里面的
      });
      // .then(re=>{
      //   console.log("re=addCart=>",re);
      // });

      // 获取购物车数据
      this.axios.get("/cart/list").then((d) => {
        // console.log("cart/list  d==>",d) //
        this.updata(d);

        // 当前商品
        // d.valid.map((d) => {
        //   console.log("map (d)==>",d)
        //   if(d==null) return;  //
        //   if (d.product_attr_unique == e.selectedSkuComb.id) {
        //     this.suki = ":" + d.productInfo.attrInfo.suk;
        //   }
        // });
      });
    },

    //更新购物车
    updata(d) {
      // this.$axios.get("/cart/list").then((d) => {
      // console.log("购物车里的物品==>", d);
      if (d.status == 410000) {
        this.$toast({
          message: d.msg,
          onClose: () => {
            this.$router.push("/login");
          },
        });
      } else {
        Toast({
          message: "加入购物车成功",
          onClose: () => {
              /* 点击加入购物车,徽标同时变化 */
            this.$axios.get("/cart/list").then((d) => {
              // console.log("mounted=>", d);
              if (d.valid) {
                this.valid = d.valid;
              }
            });
          },
        });
      }

      // });
    },
    rel() {
      this.$router.go(0);
    },
  },
  // 计算属性
  computed: {},
  mounted() {
    /* 登录成功后,进入详情页 购物车右上角徽标显示商品数量 */
    this.$axios.get("/cart/list").then((d) => {
      console.log("mounted=>", d);
      if (d.valid) {
        this.valid = d.valid;
      }
    });
  },
};
</script>

<style lang="less" >
.cell {
  color: rgb(224, 24, 24);
}
.custom-indicator {
  position: absolute;
  right: 10px;
  bottom: 20px;
  padding: 2px 5px;
  font-size: 12px;
}
.detail {
  background-color: rgb(246, 246, 246);
  .cell_right {
    .van-cell__value {
      text-align: right;
    }
  }
  .cell_div {
    position: relative;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-60%);
      width: 16px;
      &:nth-child(2) {
        margin-left: -60px;
      }
      &:last-child {
        margin-left: 44px;
      }
    }
  }
  .my-swipe {
    background-color: white;
    padding-bottom: 20px;
    .van-swipe__indicators {
      bottom: 10px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      li {
        width: 28%;
        img {
          width: 100%;
          height: 100px;
        }
        p {
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
          &:last-child {
            color: red;
            margin-bottom: 5px;
          }
        }
      }
    }
  }
  .van-cell__value {
    text-align: center;
  }
  .top_swipe {
    img {
      width: 100%;
      height: 400px;
    }
  }
  .info {
    margin-top: -6px;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    .info_top {
      display: flex;
      align-items: flex-end;
      p {
        &:nth-child(1) {
          color: #000;
          color: red;
          font-weight: 600;
        }
        &:nth-child(2) {
          margin-left: 5px;
          margin-bottom: 1px;
          font-size: 16px;
          font-weight: 600;
        }
      }
      img {
        display: inline-block;
        margin-left: 5px;
        margin-bottom: 4px;
        width: 26px;
        height: 12px;
      }
    }
    .info_con {
      margin: 5px 0;
      p {
        font-size: 16px;
        line-height: 20px;
        font-weight: 600;
      }
    }
    .info_bto {
      display: flex;
      margin: 10px 0;
      justify-content: space-between;
      p {
        font-size: 12px;
        color: rgb(118, 118, 118);
      }
    }
  }
  .description {
    max-width: 375px !important ;
    overflow: hidden;

    .attributes-list {
      font-size: 12px;
    }
    .tb-shop {
      width: 375px;
      img {
        display: block;
        width: 375px;
      }
    }
    .content {
      max-width: 375px !important ;
      img {
        max-width: 375px !important ;
      }
    }
  }
  .van-cell {
    margin-top: 10px;
  }

  p {
    // 无产品文字介绍时
    img {
      display: block;
      width: 375px;
    }
  }
}
.hou {
  width: 100%;
  position: fixed;
  z-index: 2;
  font-family: serif;
  background-color: rgba(0, 0, 0, 0.13);
}
</style>